﻿@model Capstone_20130302.Models.Profile
@using Capstone_20130302.Models
@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_FreeLayout.cshtml";
    List<Store> liststore = ViewBag.liststore;
    List<Product> listpro = ViewBag.listpro;
    List<UserProfile> listfollow = ViewBag.listfollow;
    UserProfile _user = ViewBag._user;
}

<div class="page" id="p-profile">
    <div class="cover-wrapper">
        <div class="header-cover" style="background: url(/Images/pattern.png)">
        </div>
        <div class="ease-fade"></div>
    </div>

    <div class="header-wrapper">
        <div class="store-avatar">
            <img src="/Image/@Model.ProfileImage.ImageId">
        </div>
        <div class="header">
            <h2>@Model.DisplayName</h2>
            <span class="place glyphicon glyphicon-map-marker">@Model.Address.City, @Model.Address.Country</span>
        </div>

    </div>
    <div class="content clearfix">
        <div class="left-side">
            <div class="h-people"></div>
            <div class="follow-wrapper">
                 <div class="btn-follow"></div>
                <div class="stat"><span id="TotalFollow">@listfollow.Count</span> people following</div>
                <div class="follow-list">
                   <ul id="follow-list_member" class="follow-list_member">
                    @foreach (UserProfile profile in listfollow)
                    {
                        <li id="user_@profile.UserId"><a href="/User/Id/@profile.UserId">
                            <img class="user"  title="@profile.Profile.DisplayName" src="/Image/@profile.Profile.ProfileImage.ImageId"></a></li>
                    }
                </ul>
                </div>

              
            </div>
        </div>
        <div class="right-side">
            <h4>Following Stores</h4>
            <div class="chooser-wrapper">
                <ul>
                    @foreach (var store in liststore)
                    {
                        <li>
                            <div class="cate-wrapper">

                                <div class="cover">
                                    <img class="cate" src="/Image/@store.ProfileImageId">
                                </div>
                                <div class="caption">@store.StoreName</div>
                            </div>
                        </li>
                    }
                </ul>
            </div>

        </div>
    </div>
    <div class="item-wrapper product">
        <div class="heading"></div>
        <div class="product-grid">
            @foreach (var item in listpro)
            {
                <div class="product cate-@item.CategoryId">
                    <a href="/Product/Id/@item.ProductId">
                        <div class="image">
                            <img src="/Image/@item.ProductImages.First().ImageId"/>
                        </div>
                        <div class="description">
                            <h4>@item.Name</h4>
                            <p>@item.Description</p>
                        </div>
                   </a>
                </div>
            }
        </div>
    </div>
</div>

<style type="text/css">
    #p-profile {
        border: solid 1px #fff;
        background: #fff;
        margin: 50px auto;
        line-height: 1.5;
        color: #646472;
        box-shadow: 0px 1px 11px #A5A5A5;
        position: relative;
        color: #1F1F2C;
        border-radius: 5px;
    }

    .cover-wrapper {
        position: relative;
    }

    .header-cover {
        height: 200px;
        width: 100%;
        background-position: center;
        border-radius: 5px 5px 0 0;
    }

    .ease-fade {
        height: 50px;
        width: 100%;
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.84), white);
        position: absolute;
        bottom: 0px;
    }

    .store-avatar {
        height: 150px;
        width: 150px;
        position: absolute;
        left: 50%;
        margin-left: -75px;
        top: -75px;
    }

        .store-avatar img {
            padding: 5px;
            border-radius: 500px;
            border: solid 1px #ccc;
            width: 150px;
            height: 150px;
            background: white;
            box-shadow: 1px 1px 4px rgba(61, 61, 61, 0.24);
        }

    .header-wrapper {
        padding: 0px 50px 40px;
        position: relative;
        height: 100px;
        background: -webkit-linear-gradient(top, white 50%, rgba(255, 255, 255, 0.54), rgba(227, 225, 221, 0.65));
    }

    h2 {
        font-family: "Century";
        font-weight: normal;
        font-size: 32px;
        margin: 0 0 10px 0;
        color: #646473;
        background-color: #565656;
        color: transparent;
        text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.5);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
    }

    .glyphicon {
        margin-right: 20px;
    }

        .glyphicon:before {
            margin-right: 8px;
            font-size: 16px;
            top: 4px;
            position: relative;
            background: -webkit-linear-gradient(top, #B13E30, #DB2525);
            color: transparent;
            text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.5);
            -webkit-background-clip: text;
        }

    .follow-wrapper {
        width: 260px;
    }

    .btn-follow:hover {
        opacity: .9;
    }

    .content {
        padding: 0 40px;
    }

    .stat {
        margin: 12px 0 10px 0;
        display: inline-block;
    }

    .follow-wrapper .follow-list ul {
        margin-left: 0;
        list-style: none;
        float: left;
    }

    .h-people {
        background: url(/Images/people.png);
        width: 205px;
        height: 103px;
        position: relative;
        top: -8px;
    }

    .left-side {
        width: 30%;
        background: url(/Images/shadow.png) no-repeat;
        background-position: top right;
        min-height: 400px;
        float: left;
    }

    .right-side {
        float: left;
        width: 70%;
        padding: 40px 40px;
        box-sizing: border-box;
        text-align: center;
    }

    h4 {
        font-family: "Century";
        font-weight: normal;
        font-size: 180%;
        display: inline;
    }

    .chooser-wrapper {
        margin-top: 25px;
        width: 100%;
    }


    ul {
        list-style: none;
        margin-left: 0;
    }

    .chooser-wrapper ul li {
        padding: 15px;
        display: inline-block;
    }

    .chooser-wrapper .cate-wrapper {
        position: relative;
        text-align: center;
    }

    .chooser-wrapper .caption {
        color: #747474;
        display: inline-block;
        margin-top: 10px;
    }

    .chooser-wrapper .cover img {
        border-radius: 500px;
        padding: 2px;
        box-shadow: 0px 0px 3px #BBB;
        width: 80px;
    }


    .item-wrapper.product {
        width: 100%;
        border-top: solid 1px #fff;
        padding-bottom: 40px;
    }
    .product .heading {
        background: url(/Images/h-favorite-products.png) no-repeat;
        height: 64px;
        width: 870px;
        position: relative;
        top: -4px;
        margin: 0 auto 30px auto;
    }
    .item-wrapper {
        box-shadow: inset 0px 10px 70px 1px rgba(155, 155, 140, 0.23);
        padding: 0 40px;
        box-sizing: border-box;
    }
    .item-wrapper .filter ul {
        list-style: none;
        margin: 0;
    }
    .item-wrapper .filter ul li {
        float: left;
        margin-right: 15px;
    }
    .item-wrapper .filter ul li a {
        color: #646472;
        padding: 5px 10px;
    }
    .item-wrapper .filter ul li a.active {
        font-weight: bold;
        border-bottom: solid 4px #B9B9C8;
    }
    .item-wrapper .filter ul li a span {
        opacity: .6;
        color: #646472;
        font-weight: normal;
    }
    .filter {
        margin: 20px 0 40px 0;
        text-shadow: 1px 1px 1px #fff;
    }
    .product-grid {
        width: 100%;
        margin: -10px;
    }
    .product-grid .product {
        padding: 0;
        border: solid 1px white;
        box-shadow: 1px 2px 6px #B1B1B1;
        margin: 10px;
    }
    .product-grid .product .description {
        padding: 10px;
        color: #646472;
    }
    .product-grid .product .description h4 {
        font-size: 120%;
        margin: 0;
        font-family: "Century";
        font-weight: normal;
    }
    .product-grid .product .description p {
        margin-bottom: 0;
        opacity: .7;
    }

    .btn-follow {
        background: url(/Images/follow.png) no-repeat 0 0;
        width: 87px;
        height: 31px;
        margin: 10px 0;
        float: left;
        cursor: pointer;
    }
    .btn-follow:hover {
        opacity: .9;
    }
</style>

<script>


    $(document).ready(function () {
        $.getJSON("/Profile/GetUserFollow/@_user.UserId", function (data) {
            if (data) {
                $(".btn-follow").toggleClass("active");
            }
        });
    });

    function CreateTextUser() {
         @if (_user != null)
         {
             <text>
           var html = "";
           html = "<li id='user_@_user.UserId'><a href='/User/Id/@_user.UserId'>"
           html += "<img class='user' src='/Image/@_user.Profile.ProfileImage.ImageId'></a></li>"
           return html;
            </text>
         }
    }

    $(".btn-follow").click(function () {
        var classname = $('.btn-follow').attr('class');
        if (classname == 'btn-follow active') {
            $.getJSON("/Profile/DeleteUserFollow/@_user.UserId", function (data) {
                if (data=='true') {
                    $(".btn-follow").toggleClass("active");
                    var num = $('#TotalFollow').text();
                    num = parseInt(num) - 1;
                    $('#TotalFollow').text(num);
                    @if (_user != null)
                    {
                         <text>
                             $("#user_@_user.UserId").remove();
                        </text>
                    }
                }
                else {
                    alert(data);
                }
            });
        }
        else {
            $.getJSON("/Profile/AddUserFollow/@_user.UserId", function (data) {
                if (data=='true') {
                    $(".btn-follow").toggleClass("active");
                    var num = $('#TotalFollow').text();
                    num = parseInt(num) + 1;
                    $('#TotalFollow').text(num);
                     @if (_user != null && listfollow.Count < 6)
                     {
                        <text>
                    var html = CreateTextUser();
                    $('.follow-list_member').prepend(html);
                        </text>
                    }
                }
                else {
                    alert(data);
                }
            });
        }
      })



    $(function() {
        $(".product-grid").isotope({
            layoutMode: "masonry",
            masonry: {
            }
        });
        setTimeout(function () {
            $(".product-grid").isotope({ filter: "*" });
        }, 500);
        
        $('#filters a').click(function(){
            var selector = $(this).attr('data-filter');
            $(".product-grid").isotope({ filter: selector });
            $('#filters a').removeClass("active");
            $(this).addClass("active");
            return false;
        });
    });
</script>